<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>洗护系统数据库控制台</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        .header { background: #f5f5f5; padding: 20px; border-radius: 5px; margin-bottom: 20px; }
        .section { margin-bottom: 30px; }
        .tables-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
        .table-btn { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .table-btn:hover { background: #0056b3; }
        .query-area { width: 100%; height: 100px; margin-bottom: 10px; }
        .execute-btn { padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; }
        .execute-btn:hover { background: #1e7e34; }
        .result-area { border: 1px solid #ddd; padding: 15px; background: #f9f9f9; min-height: 200px; overflow: auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🗄️ 洗护系统数据库控制台</h1>
            <p>这是一个简化的数据库查看工具，避免H2控制台的连接问题</p>
        </div>

        <div class="section">
            <h2>📊 数据库表</h2>
            <div class="tables-list" id="tablesList">
                <button type="button" class="table-btn" onclick="loadTables()">刷新表列表</button>
            </div>
        </div>

        <div class="section">
            <h2>🔍 SQL查询</h2>
            <textarea class="query-area" id="sqlQuery" placeholder="输入SQL查询语句，例如：SELECT * FROM USERS;">SELECT * FROM USERS;</textarea><br>
            <button type="button" class="execute-btn" onclick="executeQuery()">执行查询</button>
            <button type="button" class="table-btn" onclick="clearResult()">清空结果</button>
        </div>

        <div class="section">
            <h2>📋 查询结果</h2>
            <div class="result-area" id="resultArea">点击"刷新表列表"开始查看数据库内容</div>
        </div>
    </div>

    <script>
        // 加载表列表
        function loadTables() {
            fetch('/db/tables')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const tablesList = document.getElementById('tablesList');
                        tablesList.innerHTML = '<button class="table-btn" onclick="loadTables()">刷新表列表</button>';
                        
                        data.data.forEach(table => {
                            const btn = document.createElement('button');
                            btn.className = 'table-btn';
                            btn.textContent = table.TABLE_NAME;
                            btn.onclick = () => loadTableData(table.TABLE_NAME);
                            tablesList.appendChild(btn);
                        });
                        
                        document.getElementById('resultArea').innerHTML = 
                            '<div class="success">✅ 找到 ' + data.data.length + ' 个表</div>';
                    } else {
                        document.getElementById('resultArea').innerHTML = 
                            '<div class="error">❌ 加载表列表失败: ' + data.error + '</div>';
                    }
                })
                .catch(error => {
                    document.getElementById('resultArea').innerHTML = 
                        '<div class="error">❌ 请求失败: ' + error.message + '</div>';
                });
        }

        // 加载表数据
        function loadTableData(tableName) {
            document.getElementById('sqlQuery').value = 'SELECT * FROM ' + tableName + ';';
            executeQuery();
        }

        // 执行查询
        function executeQuery() {
            const sql = document.getElementById('sqlQuery').value.trim();
            if (!sql) {
                alert('请输入SQL语句');
                return;
            }

            const formData = new FormData();
            formData.append('sql', sql);

            fetch('/db/query', {
                method: 'POST',
                body: formData
            })
                .then(response => response.json())
                .then(data => {
                    const resultArea = document.getElementById('resultArea');
                    
                    if (data.success) {
                        if (data.type === 'query' && Array.isArray(data.data)) {
                            resultArea.innerHTML = formatQueryResult(data.data);
                        } else {
                            resultArea.innerHTML = '<div class="success">✅ ' + data.data + '</div>';
                        }
                    } else {
                        resultArea.innerHTML = '<div class="error">❌ 查询失败: ' + data.error + '</div>';
                    }
                })
                .catch(error => {
                    document.getElementById('resultArea').innerHTML = 
                        '<div class="error">❌ 请求失败: ' + error.message + '</div>';
                });
        }

        // 格式化查询结果
        function formatQueryResult(data) {
            if (data.length === 0) {
                return '<div class="success">✅ 查询成功，但没有数据</div>';
            }

            let html = '<div class="success">✅ 查询成功，共 ' + data.length + ' 条记录</div>';
            html += '<table><thead><tr>';
            
            // 表头
            const keys = Object.keys(data[0]);
            keys.forEach(key => {
                html += '<th>' + key + '</th>';
            });
            html += '</tr></thead><tbody>';
            
            // 数据行
            data.forEach(row => {
                html += '<tr>';
                keys.forEach(key => {
                    let value = row[key];
                    if (value === null) value = 'NULL';
                    if (typeof value === 'string' && value.length > 50) {
                        value = value.substring(0, 50) + '...';
                    }
                    html += '<td>' + value + '</td>';
                });
                html += '</tr>';
            });
            
            html += '</tbody></table>';
            return html;
        }

        // 清空结果
        function clearResult() {
            document.getElementById('resultArea').innerHTML = '';
            document.getElementById('sqlQuery').value = '';
        }

        // 页面加载时自动加载表列表
        window.onload = function() {
            loadTables();
        };
    </script>
</body>
</html>
